import { reactive, ref, watch, computed } from "vue/dist/vue.esm-bundler"
import NF from './NetFunc'
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"
import { getGameList } from "../apis/game"
export default {
    template: `
    <div class="main">
        <div class="block text-center" m="t-4">
            <el-carousel trigger="click" type="card" height="280px">
            <el-carousel-item v-for="(item,index) in gamedata.slice(0,5)" :key="item" @click="TapGame(index)">
                <img :src="item.thumbnail" class="carousel-img"/>
                <div v-text="item.title" style="background:rgb(255,255,255,0.8)"></div>
            </el-carousel-item>
            </el-carousel>
        </div>
        <div class="gamelist" v-for="(item,index) in gamedata" @click="TapGame(index)">
            
                
                <div class="pd">
                    <div class="title">
                        <h4>{{item.title}}</h4>
                        <img :src="item.thumbnail" class="img"/>
                    </div>
                    <div class="dr">
                    游戏介绍：<br/>{{item.description}}
                    </div>
                </div>

        </div>
        <div class="page">
        <button @click="TapPrevious">上一页</button><br>
        <h5>{{page+1}}</h5>
        <button @click="TapNext">下一页</button><br>
        <button @click="TapFirst">回到首页</button>
        </div>
    </div>
    `,

    setup() {
        const gamedata = reactive([])
        const router = useRouter()
        const store = useStore()
        const page = computed(() => store.state.page)
        const Nf = new NF()
        //按钮翻页
        function TapPrevious() {
            if (page.value > 0) {
                store.commit('PvPage', 1)
            } else {
                alert('已经是第一页了')
            }
            Indexlist()
        }
        function TapFirst() {
            store.commit('SetPage', 0)
            Indexlist()
        }
        function TapNext() {
            store.commit('AddPage', 1)
            Indexlist()
        }
        //显示游戏列表
        async function Indexlist() {
            const g = await getGameList(page)
            gamedata.length = 0
            for(let i of g.data.msg){
                gamedata.push(i)
            }
        }
        //点击进入详情页
        function TapGame(i) {
            const id = gamedata[i].id
            console.log('点击游戏详情', gamedata[i])

            router.push({
                name: 'detail',
                query: { ID: id }
            })

            // id.value=gamedata[i].id
        }

        Indexlist()
        return { gamedata, page, Indexlist, TapFirst, TapPrevious, TapNext, TapGame }
    },
    // components:{
    //     gf
    // }
}